<template>
  <view id="homedrawerstash">
    <view class="stash_list">
      <scroll-view class="scroll_view" scroll-y>
        <view class="list_box">
          <view
            class="stash_item"
            v-for="(item, index) in userStore.warehouseList.Stashlist"
            :key="item.GodownCode">
            <view
              @tap="changeStash(item)"
              class="item_Border flex"
              :class="{
                active: item.GodownCode == userStore.defaultStash.GodownCode,
                disabled: item.GodownStatus != 'Normal',
              }">
              <view class="item_img flex">
                <image
                  v-if="item.GodownStatus != 'Normal'"
                  class="medium_Icon"
                  src="@/static/img/home/storehouse-disable.png"
                  mode="scaleToFill" />
                <image
                  v-else-if="
                    item.GodownCode == userStore.defaultStash.GodownCode
                  "
                  class="medium_Icon"
                  src="@/static/img/home/storehouse-g.png" />
                <image
                  v-else
                  class="medium_Icon"
                  src="@/static/img/home/storehouse-grey.png" />
              </view>

              <image
                v-if="item.GodownCode == userStore.defaultStash.GodownCode"
                class="mini_Icon"
                src="@/static/img/home/Selected-g.png" />
            </view>
            <text
              :style="{ color: item.GodownStatus != 'Normal' ? '#e4e4e4' : '' }"
              class="stash_name fs_15 text_overflow"
              >{{ item.GodownName }}
            </text>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="content">
      <view class="content_title">
        <view class="fs_20 name">
          {{ userStore.defaultStash.GodownName }}
        </view>
        <view class="info_box">
          <view class="info_item">
            <text class="title fs_14">仓库管理员</text>
            <text class="info fs_16">{{ userStore.profile.StaffName }}</text>
          </view>
          <view class="info_item">
            <text class="title fs_14">所属部门</text>
            <text class="info fs_16">{{ userStore.profile.StaffDept }}</text>
          </view>
        </view>
      </view>
      <view class="sundry">
        <view @tap="goOtherPage('my')" class="Account flex">
          <view class="fs_16 Account_title">账号和安全</view>
          <uni-icons type="right" color="#B7B7B7" size="14" />
        </view>
      </view>
      <view @tap="handleQuit" class="quit fs_16"> 退出登录 </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMemberStore } from "@/stores";
import { baseURL } from "@/utils/api/http";
const userStore = useMemberStore();

const handleQuit = () => {
  userStore.exitLogin();
};
const changeStash = (item: any) => {
  if (item.GodownStatus != "Normal") {
    return;
  }
  userStore.changeStash(item);
};
const goOtherPage = (page: string) => {
  uni.navigateTo({
    url: "/pages/my/my",
  });
};
</script>

<style lang="scss" scoped>
#homedrawerstash {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .stash_list {
    width: 95px;
    height: 100%;
    .scroll_view {
      padding: 40px 0px;
      height: 100%;
      background-color: #f7f8fa;
      width: 100%;
      .list_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        .stash_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 10px 0px;
          .item_Border {
            position: relative;
            width: 56px;
            height: 56px;
            background: rgba(173, 175, 184, 0.2);
            border: 1px dashed #adafb8;
            justify-content: center;
            border-radius: 50%;
            &.active {
              border: 1px solid #32966f;
            }
            &.disabled {
              border: 1px solid #f4f4f4;
              color: #e4e4e4;
            }
            .item_img {
              width: 52px;
              height: 52px;
              border-radius: 50%;
              background: #fdf9f6;
              justify-content: center;
            }

            .mini_Icon {
              position: absolute;
              bottom: 0px;
              right: -6px;
            }
          }
        }
      }
    }
  }
  .content {
    width: 775px;
    height: 100%;
    padding: 40px 20px;
    position: relative;
    .content_title {
      .name {
        margin: 10px 0px;
      }
      .info_box {
        display: flex;
        padding: 0 0 20px 0;
        border-bottom: 1px solid rgb(228, 228, 228);
        .info_item {
          margin: 0 20px 0 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          .title {
            color: rgb(173, 175, 184);
            margin: 5px 0px;
          }
        }
      }
    }
    .sundry {
      .Account {
        padding: 20px 0px;
        justify-content: space-between;
      }
    }
    .quit {
      padding: 15px 40px;
      border-radius: 10px;
      /* 描边/灰5 */
      background: rgb(244, 244, 244);
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      color: rgb(247, 59, 74);
    }
  }
}
</style>
